<template>
	<view class="bgfff" style="min-height: 100%;">
		<view class="p40 bgfff pb40 pt40">
			<view class="interGral  flexCenter juCen cloum">
				<view class="flexButtom ">
					<image src="../../../static/img/detailsMsg/icon_integral.png" mode="" class="icon_integral"></image>
					<text class="colorfff intergalNum">{{ownScore}}</text>
				</view>
				<view class="mt30 colorfff f24">我的积分</view>
				<view class="interrule textCenter f24 colorfff" @click="setDataVals('ruleFlag' , true)">积分规则</view>
			</view>  
			<view class="flexCenter mt60 sbew">
				<view class="textCenter itemEntey" @click="navRouter('/pages/my/integral/interGralList')">
					<image src="../../../static/img/detailsMsg/icon_PointsDetails.png" mode=""></image>
					<view class="f24">积分明细</view>
				</view>
				<view class="textCenter itemEntey" @click="navRouter('/pages/my/integral/ranking')">
					<image src="../../../static/img/detailsMsg/icon_RankingList.png" mode=""></image>
					<view class="f24">排行榜</view>
				</view>
				<view class="textCenter itemEntey" @click="navRouter('/pages/my/integral/record')">
					<image src="../../../static/img/detailsMsg/icon_ExchangeRecord.png" mode=""></image>
					<view class="f24">兑换记录</view>
				</view>
			</view>
		</view>
		<view class="grayBg"></view>
		<view class="p40 bgfff pb40 pt40">
			<view class="flexCenter saru">
				<view :class="[currentNav == 0 ? 'navActive' : '' , 'f30']" @click="setDataVal('currentNav', 0)">热门兑换</view>
				<view class="" style="display: flex;align-items: center;">
					<view :class="[currentNav == 1 ? 'navActive' : '' , 'f30']" @click="setDataVal('currentNav', 1)">积分排序</view>
					<image src="../../../static/img/detailsMsg/icon_sort_bottom.png" mode="" class="storIcon" v-if="sortShop == 0"  @click="setDataVal('sortShop', 1)"></image>
					<image src="../../../static/img/detailsMsg/icon_sort_top.png" mode="" class="storIcon" v-else  @click="setDataVal('sortShop', 0)"></image>
				</view>
				
			</view>
			<view class="pt10">
				<view class="ShopList sbew flexWarp" v-if="lists.length > 0">
					<view class="ShopItem pb40 mt40 w48" v-for="(item,index) in lists" :key="index" @tap="detailst(item.goodsId)">
						<image :src="item.goodsCover" mode="" class="shopImage"></image>
						<view class="ml20 mt30">
							<view class=" f30 overnow">{{item.goodsName}}</view>
							<view class="mt30 Colororgin">
								<text class="f36">{{item.exchangeScore}}</text>
								<text class="f24">积分</text>
							</view>
						</view>
					</view>
				</view>
				<view class="nodatas" v-else>
					<image src="../../../static/img/detailsMsg/available.png"></image>
					<view style="text-align: center;">暂无数据~</view>
				</view>
			</view>
		</view>
		<view class="ruleBox textCenter autoCenter" v-if="ruleFlag">
			<view class="ruleContent">
				<view class="colorfff f36 ruleTip">积分规则</view>
				<scroll-view scroll-y="true" class="contain">
					<view>1、上报故障积分+{{inerratic.reportFault}}</view>
					<view>2、上报困人积分+{{inerratic.reportTiring}}</view>
					<view>3、电梯维修积分+{{inerratic.faultRepair}}</view>
					<view>4、电梯保养积分+{{inerratic.elevatorUpkeep}}</view>
				</scroll-view>
				<view class="clong textCenter colorfff"  @click="setDataVals('ruleFlag' , false)">知道了</view>
			</view>
			<image src="../../../static/img/detailsMsg/rule_icon_close.png" mode="" class="cloneRuleIcon mt30"  @click="setDataVals('ruleFlag' , false)"></image>
		</view>
		<view class="ContentMask" v-if="ruleFlag"></view>
	</view>
</template>

<script>
	import home from "@/serve/api/home.js"
	export default {
		data(){
			return {
				currentNav:0,
				sortShop:0,
				ruleFlag:false,
				lists:[],
				ownScore:'',
				inerratic:'',//积分规则
				pageNum:1,
				
			}
		},
		mounted(){
			
		},
		onLoad() {
			//我的积分
			this.my_line()
			//积分规则
			this.regulation()
			this.my_integral()
		},
		onReachBottom: function() {
				this.my_integral();
		},
		methods:{
			setDataVals(key,val){ 
				this[key] = val
			},
			setDataVal(key,val){  
				this[key] = val
				this.pageNum = 1
				this.lists = []
				this.my_integral()
			},
			//我的积分
			async my_line(){
				const res = await home.selectSysUserById({})
				this.ownScore = res.data.data.ownScore
			},
			//积分规则
			async regulation(){
				const res = await home.selectIntegralRules({})
				this.inerratic = res.data.data
			},
			//积分兑换商品
			async my_integral() {
				let parme = {
					pageNum:this.pageNum,
					pageSize:10,
					sortFiled:this.currentNav,
					sortRule:this.sortShop,
				}
				const res = await home.selectGoodsList(parme)
				this.pageNum += 1;
				this.lists = this.lists.concat(res.data.data.list)
				if (res.data.data.list.length < 10 && this.lists.length > 0) {
					uni.showToast({
						icon: 'none', 
						title: '已加载全部'
					})
				} else if (res.data.data.list.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '暂无数据'
					})
				}  
			},
			detailst(id){
				uni.navigateTo({
					url:'details?goodsId=' + id
				})
			}
		}
	}  
</script>

<style lang="scss" scoped>
	@import "../../../static/css/init.css";    
	page{
		height: 100%;
	}
	.interGral {
		background: url('../../../static/img/detailsMsg/integralbg.png') no-repeat;
		background-size: 100% 100%;
		width: 100%;  
		height: 250rpx;
		position: relative;
	}
	.intergalNum {
		line-height: 60rpx;
		font-size: 72rpx;
		margin-left: 14rpx;
	}
	.interrule {
		position: absolute;
		right: 0;
		top: 30rpx;
		padding: 0 20rpx;
		height: 48rpx;
		line-height: 48rpx;
		background: #FFFFFF;
		background-color: rgba(255, 255, 255, .3);
		border-radius: 24px 0px 0px 24px;
	}

	.itemEntey > image{
			width: 90rpx;
			height: 90rpx;
	}
	
	.storIcon{
		width: 18rpx;
		height: 18rpx;
		margin-left: 10rpx;
	}
	.navActive{
		font-weight: bold;
		position: relative;
		
	}
	.navActive::after{
		content: "";
		width: 100%;
		height: 8rpx;
		position: absolute;
		bottom: 4px;
		background-color: #017EFE;
		opacity: 0.6;
		left: 0;
	}
	.icon_integral {
		width: 40rpx;
		height: 40rpx;
	}
	.ShopList > .ShopItem{
		background: #FFFFFF;
		box-shadow: 0px 10rpx 10rpx 0px rgba(52, 54, 61, 0.05);
		border-radius: 10rpx;
	}
	.shopImage{
		width: 320rpx;
		height: 320rpx;
		font-size: 0;
	}
	.Colororgin{
		color: #FF5753;
	}
	.ruleBox{
		position: fixed;
		z-index: 1;
	}
	.ruleContent{
		background: url("../../../static/img/detailsMsg/Rulebg.png");
		width: 500rpx;
		height: 600rpx;
		background-size: 100% 100%;
	}
	.ruleTip{
		padding-top: 80rpx;
	}
	.contain{
		margin-top: 90rpx;
		height: 270rpx;  
	}
	.clong{
		height: 80rpx;
		line-height: 80rpx;
		background: linear-gradient(0deg, #017EFE, #5AABF0);
		width: 340rpx;
		margin: 0 auto;
		border-radius: 36rpx;
	}
	.cloneRuleIcon{
		width: 48rpx;
		height: 48rpx;
		
	}
	.nodatas{
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		margin-top: 40px;
	}
	.nodatas > image{
		width: 100px;
		height: 70px;
		margin-bottom: 20px;
	}
	.w48{
		width: 48%;
	}
	.overnow{
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	
	
</style>
